<template>
  <ul id="context-menu" :style="{left: locationX + 'px', top: locationY + 'px'}">
    <li 
      v-for="menuItem in menuList" 
      :key="menuItem.key" 
      @click="handleClick(menuItem.key, menuItem.needInput, menuItem.inputValue)"
    >
    {{menuItem.name}} 
    <input
      class="input-style"
      v-if="menuItem.needInput" 
      v-model="menuItem.inputValue" 
      style="width: 50px;height: 25px"
      @focus.stop
      @click.stop
    />
    {{menuItem.needInput ? menuItem.key.split('-')[menuItem.key.split('-').length -1] === 'row' ? '行' : '列' : ''}}
  </li>
  </ul>
</template>

<script>
import { disableScroll, enableScroll } from './disabledScroll.js';
export default {
  name: 'ContextMenu',
  props: {
    locationX: {
      type: Number
    },
    locationY: {
      type: Number
    },
    isMove: {
      type: Boolean
    }
  },
  data() {
    return {
      menuList: [{
        key: 'insert-top-row',
        name: '向上插入',
        needInput: true,
        inputValue: undefined,
      }, {
        key: 'insert-bottom-row',
        name: '向下插入',
        needInput: true,
        inputValue: undefined,
      }, {
        key: 'insert-left-column',
        name: '向左插入',
        needInput: true,
        inputValue: undefined,
      },  {
        key: 'insert-right-column',
        name: '向右插入',
        needInput: true,
        inputValue: undefined,
      }, {
        key: 'delete-row',
        name: '删除所选行'
      }, {
        key: 'delete-column',
        name: '删除所选列'
      },{
        key: 'split-td',
        name: '拆分单元格'
      }, {
        key: 'merge-td',
        name: '合并单元格'
      }],
    }
  },
  created() {
    if(this.isMove) {
      this.menuList = this.menuList.filter(menu => {
        return menu.key != 'split-td'
      })
    } else {
      this.menuList = this.menuList.filter(menu => {
        return menu.key != 'merge-td'
      })
    }
  },
  mounted() {
    disableScroll();
    // disableContextMenu();
  },
  destroyed() {
    enableScroll();
  },
  methods: {
    handleClick(key, needInput, value) {
      if(needInput) {
        this.$emit('click', key, value)
      } else {
        this.$emit('click', key)
      }
    },
  }
}
</script>

<style lang="less">
  #context-menu {
    max-width: 220px;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 8%);
    padding: 4px 0;
    position: fixed;
    z-index: 999;
    li {
      list-style: none;
      height: 34px;
      line-height: 34px;
      cursor: pointer;
      text-align: center;
      color: #595959;
      padding: 0 10px;
      .input-style {
        outline: none;
        border-radius: 4px;
        border-width: 1px;
        border-width: 1px;
        border-style: solid;
        border-color: #eee;
        &:hover {
          border-color: #aaa;
        }
      }
      &:hover {
        background-color: #f0f0f0;
        // color: #fff;
      }
    }
  }
</style>